<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>请您选择体检机构</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul class="hospital">
            <li v-for="item in hospitalList" :key="item.hpid">
                <h3>
                    {{item.name}}
                <i class="fa fa-angle-right" @click="onSubmit(item)"></i>  
                </h3>
                <div class="hospita-info">
                    <img :src="item.picture">
                    <table>
                        <tr>
                            <td>营业时间</td>
                            <td>{{ item.businesshours }}</td>
                        </tr>
                        <tr>
                            <td>采血截止</td>
                            <td>{{ item.deadline }}</td>
                        </tr>
                        <tr>
                            <td>电话</td>
                            <td>{{ item.telephone }}</td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td>{{ item.address }}</td>
                        </tr>
                    </table>
                </div>
                <div class="about">
                    <p>
                        <i class="fa fa-phone"></i>
                        联系我们
                    </p>
                    <p>
                        <i class="fa fa-map-marker"></i>
                        查找位置
                    </p>
                </div>
            </li>
            
        </ul>
        
        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
    
</template>

<script setup>

import { onMounted } from 'vue'
import router from '../router'
import { hospitalListApi } from '../api/Hospital' 
import { ref } from 'vue'

    const hospitalList = ref([])

    const onSubmit = (item) => {
        let tep = JSON.parse(sessionStorage.getItem('orderdetail'))
        tep.hpid = item.hpid
        tep.hpname = item.name
        tep.address = item.address
        tep.businesshours = item.businesshours
        tep.deadline = item.deadline
        tep.telephone = item.telephone
        sessionStorage.setItem('orderdetail',JSON.stringify(tep))
        router.push('/index')
    }

    onMounted(async() => {
        const response = await hospitalListApi()
        
        if (response.code === 200){
            hospitalList.value = response.data
        }else{
            alert("获取医院列表失败："+response.message)
        }
    })

</script>

<style src="../assets/css/hospital.css" scoped>
</style>